<template>
  <div class="personal-info-container">
    <el-card class="info-card" v-loading="loading">
      <template #header>
        <div class="card-header">
          <span>个人信息（教职工）</span>
          <el-tag size="small" type="info" effect="plain">{{ roleName }}</el-tag>
        </div>
      </template>

      <el-descriptions :column="2" border :label-style="{ width: '140px', fontWeight: '600' }">
        <el-descriptions-item label="姓名">
          {{ teacherInfo?.nickname || teacherInfo?.name || localUser?.nickname || '-' }}
        </el-descriptions-item>
        <el-descriptions-item label="角色">
          {{ roleName }}
        </el-descriptions-item>
        <el-descriptions-item label="用户ID">
          {{ teacherInfo?.userId || localUser?.userId || '-' }}
        </el-descriptions-item>
        <el-descriptions-item label="工号">
          {{ teacherInfo?.teacherNum || '—' }}
        </el-descriptions-item>
        <el-descriptions-item label="账号">
          {{ teacherInfo?.username || localUser?.account || '—' }}
        </el-descriptions-item>
        <el-descriptions-item label="邮箱">
          {{ teacherInfo?.email || '—' }}
        </el-descriptions-item>
        <el-descriptions-item label="联系电话">
          {{ teacherInfo?.phone || localUser?.phone || '—' }}
        </el-descriptions-item>
        <el-descriptions-item label="所属部门">
          {{ teacherInfo?.department || localUser?.department || '—' }}
        </el-descriptions-item>
        <el-descriptions-item label="职称">
          {{ teacherInfo?.title || '—' }}
        </el-descriptions-item>
        <el-descriptions-item label="状态">
          <el-tag :type="teacherInfo?.status === 1 || teacherInfo?.status === '正常' ? 'success' : 'danger'" size="small">
            {{ teacherInfo?.status === 1 || teacherInfo?.status === '正常' ? '正常' : '禁用' }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="创建时间">
          {{ formatTime(teacherInfo?.createTime) || '—' }}
        </el-descriptions-item>
        <el-descriptions-item label="更新时间">
          {{ formatTime(teacherInfo?.updateTime) || '—' }}
        </el-descriptions-item>
      </el-descriptions>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { getTeacherById, type TeacherListItem } from '../../api/teacherInfo'

const loading = ref(false)
const teacherInfo = ref<TeacherListItem | null>(null)

let localUser: any = {}
try {
  const raw = localStorage.getItem('userInfo')
  localUser = raw ? JSON.parse(raw) : {}
} catch (e) {
  localUser = {}
}

const roleId = Number(localUser?.roleId) || 0
const roleMap: Record<number, string> = {
  1: '系统管理员',
  2: '辅导员',
  3: '班主任',
  4: '学生'
}
const roleName = computed(() => roleMap[roleId] || '用户')

// 格式化时间
const formatTime = (time: string | null | undefined): string => {
  if (!time) return ''
  try {
    const date = new Date(time)
    return date.toLocaleString('zh-CN', {
      year: 'numeric',
      month: '2-digit',
      day: '2-digit',
      hour: '2-digit',
      minute: '2-digit',
      second: '2-digit',
      hour12: false
    }).replace(/\//g, '-')
  } catch (e) {
    return time
  }
}

// 获取教师信息
const fetchTeacherInfo = async () => {
  const userId = localUser?.userId || localUser?.id
  if (!userId) {
    ElMessage.warning('无法获取用户ID')
    return
  }

  loading.value = true
  try {
    const response = await getTeacherById(userId)
    if (response.code === '200' && response.data) {
      teacherInfo.value = response.data
    } else {
      ElMessage.warning(response.msg || '获取教师信息失败')
    }
  } catch (error) {
    console.error('获取教师信息失败:', error)
    ElMessage.error('获取教师信息失败，请稍后重试')
  } finally {
    loading.value = false
  }
}

// 页面加载时获取教师信息
onMounted(() => {
  // 只有教职工角色（1, 2, 3）才调用接口
  if (roleId === 1 || roleId === 2 || roleId === 3) {
    fetchTeacherInfo()
  }
})
</script>

<style scoped>
.personal-info-container {
  padding: 10px;
}
.info-card {
  width: 100%;
}
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.tip-alert {
  margin-bottom: 12px;
}
.muted {
  color: #909399;
}
</style>